<template>
    
       <el-menu 
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :router="true"
      >
      <el-submenu :index="index+''" v-for="(meta ,index) in menuConfig" :key="index">
        <template slot="title">
          <i :class="meta.icon"></i>
          <span>{{meta.title}}</span>
        </template>
          <el-menu-item :index="item.path" v-for="(item,index) in meta.subs" :key="index">{{item.title}}</el-menu-item>
      </el-submenu>
    </el-menu>
</template>

<script>
export default {
    data () {
        return {
menuConfig:[
    {
        title:'商品管理',
        icon:'el-icon-setting',
        subs:[
          {title:'商品列表',path:'/good'},
          {title:'商品分类',path:'/category'},
          {title:'商品管理',path:'/brand'},
          {title:'商品属性管理',path:'/attribute'},
        ]
    },
    {
        title:'订单分类',
        icon:'el-icon-s-management',
         subs:[{title:'订单列表',path:'/order'}]
    },
    {
       title:'店铺运营',
       icon:'el-icon-service',
         subs:[
          {title:'专题管理',path:'/topic'},
          {title:'运营数据',path:'/statdata'},
        ],
    },
      ],
      newMenu:[]
        }
    },
    created(){
      let menu=this.$store.state.menu;
      let menuObj=menu.reduce((pre,cur)=>{
        pre[cur.path]=cur
        return pre
      },{}) 
      //循环完整菜单数组,生成当前用户菜单数据
      for(var i=0;i<this.menuConfig.length;i++){
        let newSubs=[]
        for(var j=0;j<this.menuConfig[i].subs.length;j++){
        let subsObj=this.menuConfig[i].subs[j]
        if(menuObj[subsObj.path]){
     newSubs.push(subsObj)
        }
        }
           if(newSubs.length>0){
           this.newMenu.push({
            ...this.menuConfig[i],
             subs:newSubs
           })
         }
      }
    }
  //   created(){
  //     var arr=[
  //   {
  //       title:'商品管理',
  //       icon:'el-icon-setting',
  //       subs:[
  //         {title:'商品列表',path:'/good'},
  //         {title:'商品分类',path:'/category'},
  //         {title:'商品管理',path:'/brand'},
  //         {title:'商品属性管理',path:'/attribute'},
  //       ]
  //   },
  //   {
  //       title:'订单分类',
  //       icon:'el-icon-s-management',
  //        subs:[{title:'订单列表',path:'/order'}]
  //   },
  //   {
  //      title:'店铺运营',
  //      icon:'el-icon-service',
  //        subs:[
  //         {title:'专题管理',path:'/topic'},
  //         {title:'运营数据',path:'/statdata'},
  //       ],
  //   },
  // ]
  //      var arr2=[
  //       {id:3,user_id:2,path:"/category",path_name:"分类页面"},
  //       {id:4,user_id:2,path:"/good",path_name:"商品页面"},
  //       {id:6,user_id:2,path:"/order",path_name:"订单页面"},
  //      ];
  //      var obj2={
  //        "/category": {id:3,user_id:2,path:"/category",path_name:"分类页面"},
  //        "/good": {id:4,user_id:2,path:"/good",path_name:"商品页面"},
  //        "/order": {id:6,user_id:2,path:"/order",path_name:"订单页面"},
  //      }

  //       var newobj={}
  //       for(var m=0;m<arr2.length;m++){
  //       let path=arr2[m].path
  //       let val=arr2[m]
  //       newobj[path]=val
  //       };
  //       let resultObj=arr2.reduce((pre,cur)=>{
  //       pre[cur.path]=cur
  //       return pre
  //       },{})
  //      
  //      for(let i=0;i<arr.length;i++){
  //     
  //        for(let k=0;k<arr[i].subs.length;k++){
  //          let path=arr[i].subs[k].path
  //      
  //         if(resultObj[path]){
  //           
  //         }
  //        } 
  //     
  //      }
  //     //  console.log(newMenuArr);
  //   }
}
</script>
 
<style lang = "less" scoped>
    .el-menu-vertical-demo{
      width: 250px;
      height: 100vh;
      background-color: #324157;
      /* display: block;
      position: absolute;
      left: 0;
      top: 70px;
      bottom: 0;
      overflow-y: scroll; */
    }
    
</style>